<template>
  <div>
    <h3>Config Nuxt</h3>
    <Title>Template Config Nuxt</Title>
    <Meta name="key" content="content key"></Meta>
  </div>
</template>

<script setup lang="ts">
  // 1.判断代码之心的环境
  if (process.server) {
    console.log("server");
  } else {
    console.log("client");
  }

  if (process.client) {
    console.log("运行在 client");
  }

  if (typeof window === "object") {
    console.log("运行在 client");
  }

  // 2.获取运行时配置( server and client )
  const runtimeConfig = useRuntimeConfig();
  if (process.server) {
    console.log(runtimeConfig.appKey, runtimeConfig.public.baseURL);
  }
  if (process.client) {
    // console.log(runtimeConfig.appKey); // not
    console.log(runtimeConfig.public.baseURL);
  }

  // 3.获取appConfig
  const appConfig = useAppConfig();
  console.log(appConfig.title, appConfig.theme.primary);

  onMounted(() => {
    document.title = appConfig.title;
  });

  // 4.动态的该app所有的页面添加 head的内容
  useHead({
    title: "动态的该app所有的页面添加 useHead",
    bodyAttrs: {
      class: "test-class",
    },
    meta: [
      {
        name: "desc",
        content: "动态的该app所有的页面添加 head的内容",
      },
    ],
    style: [],
    link: [],
  });
</script>
